<template>
  <div class="userCenter" v-if="base">
    <div class="baseInfo">
      <div>
        <img src="../../assets/avatar.png" class="avatar"/>
      </div>
      <div class="base-info-text">
        <p class="nickname">昵称：{{base.nickname}}</p>
        <p>账号：{{base.mobile}}</p>
        <p>等级：普通会员</p>
      </div>
    </div>
    <form name="userForm" class="userForm" ref="userForm">
      <div class="list ">
        <div class="item">
          <div>
            <div class="item-content item-content-result">
              <span class="item-content-label"> 昵称： </span>
              <input v-model.trim="base.nickname" placeholder="" ref="nickname" class="item-result" required
                     pattern="[\u4e00-\u9fa5]{0,5}">
            </div>
          </div>
        </div>
      </div>
      <div class="list ">
        <div class="item">
          <div>
            <div class="item-content item-content-result">
              <span class="item-content-label"> 性别： </span>
              <span class="item-content item-result">
              <label style="margin-right:0.267rem">
                <q-radio v-model="base.sex" val="1"></q-radio>男
              </label>
              <label>
                <q-radio v-model="base.sex" val="2"></q-radio>女
              </label>
            </span>
            </div>
          </div>
        </div>
      </div>

      <div class="list " @click="createToast('手机号不能编辑哦')">
        <div class="item">
          <div>
            <div class="item-primary">
              <span class="item-content"> 绑定手机号： </span>
              <span class="item-content item-result">18565986598</span>
            </div>
          </div>

        </div>
      </div>
    </form>
    <div class="buttonslist">
      <span class="confirm" @click="saveBase($event)">保存</span>
      <span class="cancel  drawer-closer" @click="closeDrawer()">取消</span>
    </div>
    <v-loading :showLoading="showLoading"></v-loading>
  </div>
</template>
<script>
  import {HttpRequest} from '../../common/js/httpFun'
  import {linklist} from '../../common/js/mockdata'
  import {AlertDialog, confirmDialog} from '../../common/js/common'
  import Loading from '../loading/index'
  export default ({
    props: {
      'userInfo': {
        type: Object
      }
    },
    data () {
      return {
        'base': {
          'nickname': null,
          'mobile': null,
          'sex': null
        },
        'showLoading': false
      }
    },
    created () {
      console.log('userInfo', this.userInfo)
      this.base = this.userInfo
    },
    mounted () {
      /* console.log(this.$refs.ddd.offsetHeight) */
    },
    computed: {},
    methods: {
      createToast (text) {
        AlertDialog('警告', text)
      },
      createConfirmDialog (msg, yesFun, noFun) {
        confirmDialog(msg, yesFun, noFun)
      },
      saveBase (event) {
        // 验证规则
        if (this.$refs.nickname.validity.valueMissing) {
          this.createToast('请填写昵称')
          return false
        }
        else {
          if (!this.$refs.nickname.validity.valid) {
            this.createToast('昵称必须为最多5位的中文')
            return false
          }
        }
        this.createConfirmDialog('确定保存用户信息吗?', () => {
          this.showLoading = true
          let result = HttpRequest(linklist.useBaseUrl, {nickname: this.base.nickname, 'sex': this.base.sex}, 2)
          result.then((response) => {
            let body = response.body
            this.showLoading = false
            if (body.code === 0) {
              this.closeDrawer()
            }
            else {
              AlertDialog('提示', body.msg)
            }
          }, (response) => {
            this.showLoading = false
            AlertDialog('提示', '保存用户信息失败，请稍后再试')
          }).catch((response) => {
            this.showLoading = false
            AlertDialog('提示', '保存用户信息失败，请稍后再试')
          })
        })
      },
      closeDrawer () {
        this.$emit('closeDrawer')
      }
    },
    components: {
      'v-loading': Loading
    }
  })
</script>
